<script setup>
import { ref } from "vue";
const remoteUrl = "https://www.lufuhu.com";
const baseUrl = import.meta.env.DEV ? "/api" : `${remoteUrl}/api`;
const clickItem = () => {
    window.ipcRenderer
        .invoke("modal", {
            url: "/",
            title: "设置",
            width: 500,
            height: 500,
        })
        .then((res) => {
            console.log(res);
        })
        .catch((err) => {
            console.log(err);
        });
};
const list = ref();

const loadList = () => {
    fetch(baseUrl + "/tools", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            q: "",
        }),
    })
        .then((res) => res.json())
        .then((data) => {
            list.value = data;
        });
};
loadList();
const onStart = (item) => {
    window.ipcRenderer
        .invoke("start", {
            url: `${remoteUrl}/tools/${item.name}`,
            title: item.title,
            name: item.name,
            server: item.server,
        })
        .then((res) => {
            console.log(res);
        })
        .catch((err) => {
            console.log(err);
        });
};
const tools = ref([]);
const loadTools = () => {
    window.ipcRenderer
        .invoke("tools")
        .then((res) => {
            tools.value = res;
        })
}
loadTools();
const downloads = ref({});
const onDownload = (item) => {
    downloads.value[item.name] = true;
    window.ipcRenderer
        .invoke("download", {
            url: `${remoteUrl}${item.file}`,
            name: item.name,
        })
        .then(() => {
            loadTools();
            delete downloads.value[item.name];
        })
        .catch(() => {
            delete downloads.value[item.name];
        });
};
</script>

<template>
    <div class="h-screen w-screen">
        <div class="flex items-center gap-2 px-2 header-h header-p-r w-full">
            <img class="h-5 ml-1" src="./assets/logo.svg" />
            <div class="text-sm">Toys</div>
            <div class="drag flex-1 h-full"></div>
            <el-button size="small" link @click="clickItem">设置</el-button>
        </div>
        <div class="w-full page-h overflow-y-auto px-3">
            <div v-for="(item0, index0) in list" :key="index0">
                <el-divider content-position="left">
                    <div class="text-gray-500">{{ item0.title }}</div>
                </el-divider>
                <div class="flex flex-wrap gap-3 mb-3">
                    <el-card class="w-56 card-p-0" v-for="(item, index) in item0.children" :key="index" shadow="hover">
                        <div class="flex items-center p-3 gap-2">
                            <el-avatar :size="25">A</el-avatar>
                            <div class="flex-1 truncate text-sm" @click="onStart(item)">
                                {{ item.title }}
                            </div>
                            <el-button v-if="tools.indexOf(item.name) < 0" size="small" link @click="onDownload(item)">{{ downloads[item.name] ? '下载中..': '下载' }}</el-button>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
</style>
